<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>雨桐短网址服务</title>
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.png"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style type="text/css">
        body{
            background: url("/images/bg.jpg") no-repeat;
            background-size: 100%;
        }
        .yutons-header {
            margin: auto;
        }

        .layui-nav {
            padding: 0 200px;
        }

        .yutons-mid {
            width: 800px;
            margin: 20px auto;
            padding: 20px 40px;
            background-color: #fff;
            border-radius: 15px;
        }

        .layui-nav .layui-nav-item a {
            color: #fff;
            font-size: 24px;
        }

        .layui-form {
            margin: 0 auto 20px auto;
            /*width: 600px;*/
        }

        .yutons-item {
            text-align: center;
        }

        .yutons-item-inline {
            display: flex;
            justify-content: space-between;
        }

        .yutons-flex {
            display: flex;
        }

        .yutons-flex span {
            width: 50px;
        }

        .layui-form-label {
            width: auto;
            padding-left: 0;
        }

        .layui-form-item .layui-input-inline {
            width: 80px;
        }

        .yutons-select {
            width: 100%;
        }
    </style>
</head>
<body>
<div class="yutons-header">
    <ul class="layui-nav layui-bg-blue">
        <li class="layui-nav-item"><a href="">短网址服务</a></li>
    </ul>
</div>
<div class="yutons-mid">
    <form class="layui-form">

        <div class="layui-form-item yutons-item">
            <input type="radio" name="type" value='0' lay-filter="type" title="短网址生成" checked="">
            <input type="radio" name="type" value='1' lay-filter="type" title="短网址还原">
        </div>

        <div class="layui-form-item">
            <input type="text" name="url" lay-verify="required" autocomplete="off" placeholder="请输入网址"
                   class="layui-input">
        </div>

        <div class="layui-form-item yutons-item-inline">
            <div class="yutons-select">
                <div>
                    <label class="layui-form-label">短网址有效期</label>
                    <div class="layui-input-inline">
                        <select name="days" lay-verify="required" lay-search="">
                            <option value="7">7天</option>
                            <option value="30">1个月</option>
                            <option value="90">3个月</option>
                            <option value="180">6个月</option>
                            <option value="365">1年</option>
                            <option value="0">长期</option>
                        </select>
                    </div>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" id="submit" lay-submit="" lay-filter="demo1">生成</button>
        </div>
    </form>

    <div id="result" hidden>
        <hr>
        <div style="font-size: 16px;color: #007DDB;">
            结果：
        </div>
        <a id="copyVal" style="font-size: 17px;line-height: 24px;color: #009966;font-weight: bold;"></a>
        <button class="layui-btn layui-btn-normal layui-btn-xs" id="copy" data-clipboard-target="#copyVal">复制</button>

        <hr>
    </div>

    <div class="layui-form">
        <h5 style="font-size: 16px;font-weight: 700;margin-bottom: 5px;">短网址服务API接口</h5>
        <h5 style="font-size: 14px;margin-bottom: 5px;">短网址生成</h5>
        <blockquote class="layui-elem-quote layui-text">
            <div class="yutons-flex">
                <p>请求：http://域名/shortUrl/shorten?urlLong='待缩短的网址'&days='有效期'</p>
            </div>
            <div class="yutons-flex">
                <p>示例：http://localhost:8080/shortUrl/shorten?urlLong=https://www.baidu.com&days=7</p>
            </div>
            <div class="yutons-flex">
                <p>返回：{"success":true,"code":10000,"message":"操作成功！","url":null,"date":"2019-08-08T11:23:51.853","count":0,"data":"http://localhost:8080/m72zjNYB"}</p>
            </div>
        </blockquote>
        <h5 style="font-size: 14px;margin-bottom: 5px;">短网址还原</h5>
        <blockquote class="layui-elem-quote layui-text">
            <div>
                <p>请求：http://域名/shortUrl/shortde?url='带还原的短网址'</p>
            </div>
            <div>
                <p>示例：http://localhost:8080/shortUrl/shortde?url=http://localhost:8080/M272F3Ne</p>
            </div>
            <div>
                <p>返回：{"success":true,"code":10000,"message":"操作成功！","url":null,"date":"2019-08-08T11:24:32.831","count":0,"data":"https://www.baidu.com"}</p>
            </div>
        </blockquote>
    </div>
</div>
</body>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/clipboard.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['element', 'form'], function () {
        var $ = layui.$,
            form = layui.form;

        form.on('radio(type)', function (data) {
            $("#result").hide()
            $("#result").find("span").html("")
            if (data.value === '0') {
                $(".yutons-select div").show()
                $("#submit").html("生成")
            } else {
                $(".yutons-select div").hide()
                $("#submit").html("还原")
            }
        });

        //复制
        //必须要初始化 第一种初始化
        var clipboard = new ClipboardJS('#copy');
        clipboard.on('success', function (e) {
            layer.msg('复制成功！', {
                icon: 1
            })
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败，请联系管理员！', {
                icon: 5
            })
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            var field = data.field;
            var type = field.type;
            var url = field.url;
            var days = field.days;

            console.log(url.replace(/\s/g, ""))

            if (type === '0') {
                $.ajax({
                    type: "get",
                    url: "/shortUrl/shorten?urlLong=" + url + "&days=" + days,
                    success: function (data) {
                        var res;
                        if (data.code === 10000) {
                            res = data.data;
                            $("#result").find("a").html(res)
                            $("#result").find("a").attr('href', res)
                            $("#result").find("a").attr('target', '_blank')
                            $("#result").show()
                            $("#copy").show()
                            layer.msg('操作成功！', {
                                icon: 1
                            })
                        } else {
                            res = data.message;
                            $("#result").find("a").html(res)
                            $("#result").show()
                            $("#copy").hide()
                            layer.msg('操作失败！', {
                                icon: 5
                            })
                        }
                    },
                    error: function (e) {
                        $("#result").find("a").html("网址非法，转换失败！")
                        $("#result").show()
                        $("#copy").hide()
                    }
                })
            } else {
                $.ajax({
                    type: "get",
                    url: "/shortUrl/shortde?url=" + url,
                    success: function (data) {
                        var res;
                        if (data.code === 10000) {
                            res = data.data;
                            $("#result").find("a").html(res)
                            $("#result").find("a").attr('href', res)
                            $("#result").find("a").attr('target', '_blank')
                            $("#result").show()
                            $("#copy").show()
                            layer.msg('操作成功！', {
                                icon: 1
                            })
                        } else {
                            res = data.message;
                            $("#result").find("a").html(res)
                            $("#result").show()
                            $("#copy").hide()
                            layer.msg('操作失败！', {
                                icon: 5
                            })
                        }
                    },
                    error: function (e) {
                        $("#result").find("a").html("短网址非法，解析失败！")
                        $("#result").show()
                        $("#copy").hide()
                    }
                })
            }
            return false;
        });
    });
</script>
</html>
